<template>
  <div>
    <div style="width: 400px;height: 100%;display: flex;">
      <div style="width: 100%;">
        <el-aside style="width: 352px;padding: 0 0 0 0">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <img :src="residence.picture" class="image">
            </div>
            <div slot="header" class="clearfix">
              <h3>{{ residence.name }}</h3>
              <h4>小区地址：{{ residence.address }}</h4>
            </div>
            <div class="text item">
              <el-card class="box-card" style="margin-left: -20px;width: 100%;margin-right: -40px;">
                <div style="float: left; margin-top: -10px;">
                  <i class="el-icon-s-custom"></i>
                  实有人口
                </div>
                <el-button style="float: right; padding: 0" @click="getPopulationList()" type="text">
                  {{ residence.population }}
                </el-button>
              </el-card>
              <el-card class="box-card" style="margin-left: -20px;width: 100%;margin-right: -40px">
                <div style="float: left; margin-top: -10px;">
                  <i class="el-icon-house"></i>
                  实有房屋
                </div>
                <el-button style="float: right; padding: 0" type="text" @click="getHouseList();getMenuMessage();">
                  {{ residence.houseCount }}
                </el-button>
              </el-card>
              <el-card class="box-card" style="margin-left: -20px;width: 100%;margin-right: -40px">
                <div style="float: left; margin-top: -10px;">
                  <i class="el-icon-office-building"></i>
                  实有单位
                </div>
                <el-button style="float: right; padding: 0" type="text" @click="getUnitList()">
                  {{ residence.unit }}
                </el-button>
              </el-card>
              <el-card class="box-card" style="margin-left: -20px;width: 100%;margin-right: -40px">
                <div style="float: left; margin-top: -10px;">
                  <i class="el-icon-truck"></i>
                  实有车辆
                </div>
                <el-button style="float: right; padding: 0" type="text" @click="getVehicleList()">
                  {{ residence.vehicle }}
                </el-button>
              </el-card>
              <el-card class="box-card" style="margin-left: -20px;width: 100%;margin-right: -40px">
                <div style="float: left; margin-top: -10px;">
                  <i class="el-icon-bangzhu"></i>
                  实有力量
                </div>
                <el-button style="float: right; padding: 0" type="text" @click="getPowerList()">
                  {{ residence.strength }}
                </el-button>
              </el-card>
              <el-card class="box-card" style="margin-left: -20px;width: 100%;margin-right: -40px">
                <div style="float: left; margin-top: -10px;">
                  <i class="el-icon-video-camera"></i>
                  实有设备
                </div>
                <el-button style="float: right; padding: 0" type="text" @click="getMonitList()">
                  {{ residence.equipment }}
                </el-button>
              </el-card>
              <span style="height: 100%;"></span>
            </div>
          </el-card>
        </el-aside>
      </div>
      <!--   实有人口   -->
      <div style="width: 100%;" v-show="populationShow">
        <el-container>
          <el-container>
            <el-header>
            </el-header>
            <el-main>
              <el-row style="margin-bottom: 20px">
                <el-col :span="7" v-for="(o, index) in populationList" :key="o" :offset="index > 0 ? 1 : 0"
                        style="margin-left: 0;width: 24%;"
                >
                  <el-card :body-style="{ padding: '0px' }" style="width: 290px;height: 317px;margin-bottom: 20px">
                    <div class="info-wrapper"
                         style="height: 150px; display: flex; align-items: center; justify-content: center;"
                    >
                      <img :src="o.photo" class="image">
                    </div>
                    <div class="info-wrapper" style="display: flex; align-items: center; justify-content: center;">
                      <div class="info-wrapper">
                        <span>姓名：{{ o.name }}</span>
                        <span>性别：{{ o.sex }}</span>
                        <span>手机号：{{ o.phone }}</span>
                        <span>证件号码：{{ o.idCard }}</span>
                        <span>户籍地址：{{ o.homeAddress }}</span>
                        <span>小区名称：{{ o.plotName }}</span>
                      </div>
                    </div>
                  </el-card>
                </el-col>
              </el-row>
              <el-pagination
                @size-change="populationSizeChange"
                @current-change="populationCurrentChange"
                :current-page="communityPopulationReq.pageNum"
                :page-sizes="[3, 5, 10, 20]"
                :page-size="communityPopulationReq.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
              >
              </el-pagination>
            </el-main>
          </el-container>
        </el-container>
      </div>
      <!--   实有房屋   -->
      <div style="display: flex;" v-show="houseShow">
        <el-aside style="background-color: white;">
          <el-row class="tac">
            <el-col>
              <el-menu
                :default-active="activeIndex"
                class="el-menu-vertical-demo"
                @open="handleOpen"
                @close="handleClose"
              >
                <el-submenu
                  v-for="(residence, residenceIndex) in houseMenus"
                  :key="residence.residenceId"
                  :index="(residence.residenceId) + '-' + (residenceIndex + 1)"
                >
                  <template slot="title">
                    <span>{{ residence.residenceName }}</span>
                  </template>
                  <el-menu-item-group
                    v-for="building in residence.buildingMenuVoList"
                    :key="building.buildingId"
                  >
                    <template slot="title">{{ building.buildingName }}栋</template>
                    <el-menu-item
                      v-for="(item, itemIndex) in building.elementList"
                      :key="item.id" :index="(item.id) + '-' + (itemIndex + 1)"
                      @click="getHouseMessage( item.id, residence.residenceName, building.buildingName, item.elementName)"
                    >
                      {{ item.elementName }}
                    </el-menu-item>
                  </el-menu-item-group>
                </el-submenu>
              </el-menu>
            </el-col>
          </el-row>
        </el-aside>
        <el-main>
          <h1>{{ exactValue }}</h1>
          <div style="display: flex">
            <el-card
              class="box-card"
              v-for="o in houseList"
              :key="o"
              style="width: 150px;margin-right: 20px;"
            >
              <div style="text-align: center;line-height: 37px">
                {{ o.roomNumber }}<br>
                房屋人数：{{ o.occupancy }}<br>
                <el-tag type="success">{{ o.name }}</el-tag>
                <br>
              </div>
            </el-card>
          </div>
        </el-main>
      </div>
      <!--   实有单位   -->
      <div style="width: 100%;" v-show="unitShow">
        <el-container>
          <el-container>
            <el-header style="display: flex">
              <h1>总数：{{ total }}</h1>
              <el-form ref="form" :model="SqUnitReq"
                       style="text-align: center;display: flex;margin-top: 15px;margin-left: 200px"
              >
                <el-form-item style="display: flex;width: 200px;">
                  <el-input
                    size="mini"
                    placeholder="请输入单位名称或地址"
                    v-model="SqUnitReq.likeStr"
                    style="width: 200px;"
                  ></el-input>
                </el-form-item>
                <el-form-item>
                  <el-button size="mini" style="margin-left: 10px" type="primary" @click="getUnitList">查询</el-button>
                </el-form-item>
              </el-form>
            </el-header>
            <el-main>
              <el-row style="margin-bottom: 20px">
                <el-col :span="7" v-for="(o, index) in unitList" :key="o" :offset="index > 0 ? 1 : 0"
                        style="margin-left: 0;width: 24%;"
                >
                  <el-card :body-style="{ padding: '0px' }" style="width: 290px;height: 317px;margin-bottom: 20px">
                    <div class="info-wrapper"
                         style="height: 150px; display: flex; align-items: center; justify-content: center;"
                    >
                      <img :src="o.image" class="image">
                    </div>
                    <div class="info-wrapper" style="display: flex; align-items: center; justify-content: center;">
                      <div class="info-wrapper">
                        <b>{{ o.name }}</b>
                        <span>单位类别：{{ o.typeName }}</span>
                        <span>单位地址：{{ o.address }}</span>
                        <span>所在小区：{{ o.residenceName }}</span>
                        <span>负责人：{{ o.username }}</span>
                        <span>联系方式：{{ o.uidTel }}</span>
                        <span>证件号码：{{ o.uidIdCard }}</span>
                      </div>
                    </div>
                  </el-card>
                </el-col>
              </el-row>
              <el-pagination
                @size-change="unitSizeChange"
                @current-change="unitCurrentChange"
                :current-page="SqUnitReq.pageNum"
                :page-sizes="[3, 5, 10, 20]"
                :page-size="SqUnitReq.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
              >
              </el-pagination>
            </el-main>
          </el-container>
        </el-container>
      </div>
      <!--   实有车辆   -->
      <div style="width: 100%;" v-show="vehicleShow">
        <el-container>
          <el-container>
            <el-header style="display: flex">
              <h1>总数：{{ total }}</h1>
              <el-form ref="form" :model="vehicleInformationRequest"
                       style="text-align: center;display: flex;margin-top: 15px;margin-left: 200px"
              >
                <el-form-item style="display: flex;width: 200px;">
                  <el-input
                    size="mini"
                    placeholder="请输入车牌号、姓名、证件号"
                    v-model="vehicleInformationRequest.likeStr"
                    style="width: 200px;"
                  ></el-input>
                </el-form-item>
                <el-form-item>
                  <el-button size="mini" style="margin-left: 10px" type="primary" @click="getVehicleList()">查询
                  </el-button>
                </el-form-item>
              </el-form>
            </el-header>
            <el-main>
              <el-row style="margin-bottom: 20px">
                <el-col :span="7" v-for="(o, index) in vehicleList" :key="o" :offset="index > 0 ? 1 : 0"
                        style="margin-left: 0;width: 24%;"
                >
                  <el-card :body-style="{ padding: '0px' }" style="width: 300px;height: 260px;margin-bottom: 20px">
                    <div class="info-wrapper"
                         style="height: 150px; display: flex; align-items: center; justify-content: center;"
                    >
                      <img :src="o.vehicleInformationPic" class="image">
                    </div>
                    <div class="info-wrapper" style="display: flex; align-items: center; justify-content: center;">
                      <div class="info-wrapper">
                        <b>车牌：{{ o.vehicleInformationName }}</b>
                        <span>姓名：{{ o.username }}</span>
                        <span>小区：{{ o.name }}</span>
                        <span>楼栋：{{ o.buildingNumber }}&nbsp;单元：{{ o.elementNumber }}&nbsp;房间：{{
                            o.roomNumber
                          }}</span>
                        <span>证件号码：{{ o.idCard }}</span>
                      </div>
                    </div>
                  </el-card>
                </el-col>
              </el-row>
              <el-pagination
                @size-change="vehicleSizeChange"
                @current-change="vehicleCurrentChange"
                :current-page="vehicleInformationRequest.pageNum"
                :page-sizes="[3, 5, 10, 20]"
                :page-size="vehicleInformationRequest.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
              >
              </el-pagination>
            </el-main>
          </el-container>
        </el-container>
      </div>
      <!--   实有力量   -->
      <div style="width: 100%;" v-show="powerShow">
        <el-container>
          <el-container>
            <el-header style="height: 110px;width: 1520px;">
              <div style="display: flex;border-bottom: #5a5e66 1px dashed;">
                <h1>总数：{{ total }}</h1>
                <el-form ref="form" :model="powerReq"
                         style="text-align: center;display: flex;margin-top: 15px;margin-left: 200px"
                >
                  <el-form-item style="display: flex;width: 200px;">
                    <el-input
                      size="mini"
                      placeholder="请输入姓名、证件号、电话号码"
                      v-model="powerReq.likeStr"
                      style="width: 200px;"
                    ></el-input>
                  </el-form-item>
                  <el-form-item>
                    <el-button size="mini" style="margin-left: 10px" type="primary" @click="getUnitList">查询
                    </el-button>
                  </el-form-item>
                </el-form>
              </div>
              <div style="text-align: left;padding-top: 10px">
                治安标签：
                <el-tag style="margin: 3px 10px 0 0" :hit="tagHit[0]" @click="handleTagClick(null)">全部</el-tag>
                <el-tag
                  v-for="item in tagAll"
                  :key="item.tagId"
                  :type="item.tagName"
                  style="margin: 3px 10px 0 0"
                  :hit="tagHit[item.tagId]"
                  @click="handleTagClick(item.tagId)"
                  effect="plain"
                >
                  {{ item.tagName }}
                </el-tag>
              </div>
            </el-header>
            <el-main>
              <el-row style="margin-bottom: 20px">
                <el-col :span="7" v-for="(o, index) in powerList" :key="o" :offset="index > 0 ? 1 : 0"
                        style="margin-left: 0;width: 24%;"
                >
                  <el-card :body-style="{ padding: '0px' }" style="width: 290px;height: 317px;margin-bottom: 20px">
                    <div class="info-wrapper"
                         style="height: 150px; display: flex; align-items: center; justify-content: center;"
                    >
                      <img :src="o.img" class="image">
                    </div>
                    <div class="info-wrapper" style="display: flex; align-items: center; justify-content: center;">
                      <div>
                        <b>{{ o.communityName }}</b><br>
                        <span>性 别：{{ o.sex }}&nbsp;&nbsp;电话：{{ o.tel }}</span><br>
                        <span>证件号码：{{ o.idNumber }}</span><br>
                        <span>所属公司：{{ o.company }}</span><br>
                        <span>居住地址：{{ o.residential }}</span><br>
                        <span>户籍地址：{{ o.address }}</span><br>
                        <span>
                        <el-tag
                          v-for="item in o.tags"
                          :key="item.tagId"
                          :type="item.tagName"
                          style="margin: 3px 10px 0 0"
                          effect="plain"
                        >
                          {{ item.tagName }}
                        </el-tag>
                      </span>
                      </div>
                    </div>
                  </el-card>
                </el-col>
              </el-row>
              <el-pagination
                @size-change="powerSizeChange"
                @current-change="powerCurrentChange"
                :current-page="powerReq.pageNum"
                :page-sizes="[3, 5, 10, 20]"
                :page-size="powerReq.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
              >
              </el-pagination>
            </el-main>
          </el-container>
        </el-container>
      </div>
      <!--   实有设备   -->
      <div style="width: 100%;" v-show="facilityShow">
        <el-container style="text-align: center">
          <el-header style="height: 60px;width: 1520px;display: flex">
            <h1>总数：{{ total }}</h1>
            <el-form ref="form" :model="facilityReq"
                     style="text-align: center;display: flex;margin-top: 15px;margin-left: 200px"
            >
              <el-form-item style="display: flex;width: 200px;">
                <el-select size="mini" v-model="facilityReq.monitoringType" placeholder="请选择设备类型">
                  <el-option label="枪机" value="1"></el-option>
                  <el-option label="球机" value="2"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item style="display: flex;width: 200px;margin-left: 30px">
                <el-input
                  size="mini"
                  placeholder="请输入设备名称"
                  v-model="facilityReq.monitoringName"
                  style="width: 200px;"
                ></el-input>
              </el-form-item>
              <el-form-item>
                <el-button size="mini" style="margin-left: 10px" type="primary" @click="getMonitList">查询</el-button>
              </el-form-item>
            </el-form>
          </el-header>

          <el-main style="display: flex; align-items: center; justify-content: center;">
            <el-table :data="facilityList" style="width: 800px;">
              <el-table-column label="序号">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{ scope.row.monitoringId }}</span>
                </template>
              </el-table-column>

              <el-table-column label="摄像头名称">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{ scope.row.monitoringName }}</span>
                </template>
              </el-table-column>

              <el-table-column label="摄像机类型">
                <template slot-scope="scope">
                  <span v-show="scope.row.monitoringType===1">枪机</span>
                  <span v-show="scope.row.monitoringType===2">球机</span>
                </template>
              </el-table-column>

              <el-table-column label="操作">
                <template slot-scope="scope">
                  <i class="el-icon-loading"></i>
                </template>
              </el-table-column>
            </el-table>
          </el-main>
          <el-pagination
            @size-change="facilitySizeChange"
            @current-change="facilityCurrentChange"
            :current-page="facilityReq.pageNum"
            :page-sizes="[3, 5, 10, 20]"
            :page-size="facilityReq.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </el-container>
      </div>
    </div>
  </div>
</template>

<script>
import { populationList } from '@/api/system/population'
import { houseListByElement } from '@/api/system/house'
import { getMenuMessage } from '@/api/system/residence'
import { getSqUnitList } from '@/api/monitor/unit'
import { list } from '@/api/system/vehicle'
import { getSqPowerList } from '@/api/monitor/power'
import { facilityList } from '@/api/system/monit'

export default {
  data() {
    return {
      residence: this.$route.query.residence,
      MenuMessageRequest: {
        residenceId: this.$route.query.residence.id,
        buildingId: null
      },
      communityPopulationReq: {
        residenceId: this.$route.query.residence.id,
        sex: '',
        pageNum: 1,
        pageSize: 3
      },
      communityHouseReq: {
        residenceId: this.$route.query.residence.id,
        sex: '',
        pageNum: 1,
        pageSize: 3
      },
      SqUnitReq: {
        likeStr: '',
        residenceId: this.$route.query.residence.id,
        pageNum: 1,
        pageSize: 10
      },
      vehicleInformationRequest: {
        likeStr: '',
        residenceId: this.$route.query.residence.id,
        pageNum: 1,
        pageSize: 10
      },
      powerReq: {
        likeStr: '',
        tagId: null,
        residenceId: this.$route.query.residence.id,
        pageNum: 1,
        pageSize: 10
      },
      facilityReq: {
        monitoringName:'',
        monitoringType:null,
        residenceId: this.$route.query.residence.id,
        pageNum: 1,
        pageSize: 10
      },
      total: 0,
      populationList: [],
      houseList: [],
      unitList: [],
      powerList: [],
      facilityList: [],
      vehicleList: [],
      tagAll: [],
      tagHit: [],
      populationShow: false,
      houseShow: false,
      unitShow: false,
      powerShow: false,
      vehicleShow: false,
      facilityShow: false,
      listType: 0,
      houseMenus: [
        {
          residenceId: null,
          residenceName: '',
          buildingCount: null,
          buildingMenuVoList: [
            {
              buildingId: null,
              buildingName: '',
              elementCount: null,
              floors: null,
              houseCount: null,
              populationCount: null,
              residenceId: null,
              elementList: [
                {
                  id: null,
                  elementName: '',
                  buildingId: null
                }
              ]
            }
          ]
        }
      ],
      exactValue: '',
      activeIndex: '2',
    }
  },
  methods: {
    getPopulationList() {
      this.houseShow = false
      this.unitShow = false
      this.powerShow = false
      this.vehicleShow = false
      this.facilityShow = false
      this.populationShow = true
      this.communityPopulationReq.residenceId = this.residence.id
      populationList(this.communityPopulationReq).then(
        res => {
          this.populationList = res.data.list
          console.log(this.populationList)
          this.total = res.data.total
          this.populationShow = true
        }
      )
    },
    getHouseList() {
      this.populationShow = false
      this.unitShow = false
      this.powerShow = false
      this.vehicleShow = false
      this.facilityShow = false
      this.houseShow = true
    },
    getMenuMessage() {
      this.MenuMessageRequest.residenceId = this.residence.id
      getMenuMessage(this.MenuMessageRequest).then(response => {
        this.houseMenus = response.data
        console.log(this.houseMenus)
      })
    },
    getHouseMessage(id, residenceName, buildingName, elementName) {
      this.exactValue = residenceName + buildingName + '栋' + elementName
      houseListByElement(id).then(response => {
        this.houseList = response.data
      })
    },
    getUnitList() {
      this.populationShow = false
      this.powerShow = false
      this.vehicleShow = false
      this.facilityShow = false
      this.houseShow = false
      this.unitShow = true
      console.log(this.SqUnitReq)
      getSqUnitList(this.SqUnitReq).then(response => {
        this.unitList = response.data.list
        this.total = response.data.total
      })
    },
    getPowerList() {
      this.populationShow = false
      this.vehicleShow = false
      this.facilityShow = false
      this.houseShow = false
      this.unitShow = false
      this.powerShow = true
      this.powerReq.tagId = null
      getSqPowerList(this.powerReq).then(response => {
        this.tagAll = response.data.tags
        this.powerList = response.data.powerResponse.list
        this.total = response.data.powerResponse.total
      })
    },
    handleTagClick(tagId) {
      this.tagHit = []
      if (tagId == null) {
        this.tagHit[0] = true
      } else {
        this.tagHit[tagId] = true
      }
      this.powerReq.tagId = tagId
      getSqPowerList(this.powerReq).then(response => {
        this.tagAll = response.data.tags
        this.powerList = response.data.powerResponse.list
        this.total = response.data.powerResponse.total
      })
    },
    //列表
    getVehicleList() {
      this.populationShow = false
      this.powerShow = false
      this.facilityShow = false
      this.houseShow = false
      this.unitShow = false
      this.vehicleShow = true
      list(this.vehicleInformationRequest).then(
        res => {
          this.vehicleList = res.data.list
          this.total = res.data.total
        }
      )
    },
    getMonitList() {
      this.populationShow = false
      this.powerShow = false
      this.houseShow = false
      this.unitShow = false
      this.vehicleShow = false
      this.facilityShow = true
      facilityList(this.facilityReq).then(res=>{
        this.facilityList = res.data.list
        this.total = res.data.total
      })
    },
    populationSizeChange(res) {
      this.communityPopulationReq.pageSize = res
      this.getPopulationList()
    },
    populationCurrentChange(res) {
      this.communityPopulationReq.pageNum = res
      this.getPopulationList()
    },
    powerSizeChange(res) {
      this.powerReq.pageSize = res
      this.getPowerList()
    },
    powerCurrentChange(res) {
      this.powerReq.pageNum = res
      this.getPowerList()
    },
    facilitySizeChange(res) {
      this.facilityReq.pageSize = res
      this.getMonitList()
    },
    facilityCurrentChange(res) {
      this.facilityReq.pageNum = res
      this.getMonitList()
    },
    unitSizeChange(res) {
      this.SqUnitReq.pageSize = res
      this.getUnitList()
    },
    unitCurrentChange(res) {
      this.SqUnitReq.pageNum = res
      this.getUnitList()
    },
    vehicleSizeChange(res) {
      this.vehicleInformationRequest.pageSize = res
      this.getVehicleList()
    },
    vehicleCurrentChange(res) {
      this.vehicleInformationRequest.pageNum = res
      this.getVehicleList()
    },
    handleOpen(key, keyPath) {
      console.log(key, keyPath)
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath)
    }
  },
  created() {
    this.getMenuMessage(this.MenuMessageRequest)
  }
}
</script>

<style scoped lang="scss">
.el-header, .el-footer {
  text-align: center;
  width: 1000px;
}

.el-aside {
  text-align: center;
}

.el-main {
  text-align: left;
  width: 1520px;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
}

.el-container:nth-child(7) .el-aside {
}

.image {
  max-width: 150px; /* 限制图片的最大宽度 */
  max-height: 150px; /* 限制图片的最大高度，保持宽高比可以通过object-fit处理 */
  object-fit: cover; /* 保持图片的纵横比并填充容器 */
  border-radius: 8px; /* 添加圆角 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 添加图片阴影 */
}

.info-wrapper {
  flex: 1 1 auto; /* 信息容器占据剩余空间 */
  display: flex;
  flex-direction: column; /* 信息内容垂直排列 */
  align-items: flex-start; /* 信息内容从左侧开始排列 */
}

.abc {
  height: 100%;
  width: 100%;
}
</style>
